<template>
    <section style="padding: 24px; background:#fff;">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline"
                    @keyup.enter.native="searchQuery">
                <a-row :gutter="18">
                    <a-col :md="6">
                        <a-form-item label="角色编码">
                            <a-input placeholder="输入角色编码"
                                     v-model="queryParam.roleCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <template>
                        <a-col :md="6">
                            <a-form-item label="角色名">
                                <a-input placeholder="请输入角色名"
                                         v-model="queryParam.roleName"></a-input>
                            </a-form-item>
                        </a-col>
                    </template>
                    <a-col :md="6">
                        <span style="float: left;overflow: hidden;"
                              class="table-page-search-submitButtons">
                            <a-button type="primary"
                                      @click="searchQuery"
                                      icon="search">查询</a-button>
                            <a-button type="primary"
                                      @click="searchReset"
                                      icon="reload"
                                      style="margin-left: 8px">重置</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- table区域-begin -->
        <div>
            <a-table ref="table"
                     bordered
                     size="middle"
                     rowKey="id"
                     :columns="columns"
                     :dataSource="dataSource"
                     :pagination="ipagination"
                     :loading="loading"
                     @change="handleTableChange">

                <span slot="action"
                      slot-scope="text, record">
                    <!-- <a @click="handleResetPwd(record)">重置密码</a>

                    <a-divider type="vertical" /> -->
                    <a-popconfirm title="确定删除吗?"
                                  @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                    </a-popconfirm>

                </span>

            </a-table>
        </div>
        <!-- table区域-end -->
        <!-- 修改密码 -->
    </section>
</template>
<script>
import { getRoleList, delRoleById } from "@/api/role";
const columns = [
    {
        title: '角色编码',
        align: "center",
        dataIndex: 'roleCode',
        width: 80,
    },

    {
        title: '角色名',
        align: "center",
        width: 120,
        dataIndex: 'roleName',
        sorter: true
    },
    {
        title: '描述',
        dataIndex: 'description',
        align: 'center',
        ellipsis: true,
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center'
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: "center",
        width: 120
    }

];
export default {
    data() {
        return {
            /* 数据源 */
            dataSource: [],
            columns,
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '15', '20'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            /* table加载状态 */
            loading: false,
            queryParam: {
                roleCode: "",
                roleName: ""
            }
        }
    },
    methods: {
        //获取数据
        getData(arg) {
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            let pageNo = this.ipagination.current;
            let pageSize = this.ipagination.pageSize;
            let roleCode = this.queryParam.roleCode;
            let roleName = this.queryParam.roleName;
            this.loading = true;
            getRoleList(pageNo, pageSize, roleCode, roleName).then(res => {
                if (res.code == 200) {
                    let resData = res.data;
                    this.loading = false;
                    this.dataSource = resData.records;

                    if (resData.total) {
                        this.ipagination.total = resData.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                } else {
                    this.loading = false;
                }
            })
        },
        searchQuery() {
            this.getData(1);
        },
        searchReset() {
            this.queryParam.roleCode = '';
            this.queryParam.roleName = '';
            this.getData();
        },
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            this.ipagination = pagination;
            this.getData();
        },
        //删除角色
        handleDelete(param) {
            delRoleById(param).then(result => {
                if (result.code === 200) {
                    this.$message.success("操作成功!");
                    this.getData();
                } else {
                    this.$message.error(result.message);
                }
            })
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
        },
    },
    mounted() {
        this.getData();
    },
}
</script>
